import React, { useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { Modal, message } from 'antd';
import { Col, Row } from 'antd';
import styles from './index.module.css'

//跳转工具类
import { jumpTo } from '../../utils/jump'

//菜单数据
import itemList from '../../constant/functionMenuList'


function FunctionMenu(props) {
    //导航
    let navigate = useNavigate()
    //父控件传过来的值
    const { isModalOpen, functionMenuCancel } = props;
    //消息提示
    const [messageApi, contextHolder] = message.useMessage();
    //[]空数组相当于componentDidMount
    useEffect(() => {
        //返回的函数相当于unmountComponentAtNode
        return () => {

        }
    }, []);

    function handleCancel() {
        functionMenuCancel();
    };

    function clickItem(index) {
        switch (index) {
            case 0:
                //系统看板
                jumpTo(navigate, '/main/test02', true, null)
                break;

            case 1:
                //地图
                jumpTo(navigate, '/main/map', true, null)
                break;

            case 2:
                //定时任务
                jumpTo(navigate, '/main/taskManage', true, null)
                break;

            case 3:
                //人脸
                jumpTo(navigate, '/main/faceManagement', true, null)
                break;

            case 4:
                //案件上报
                jumpTo(navigate, '/caseReport', false, null)
                break;

            default:
                messageApi.open({ type: 'error', content: '功能暂未开放' });
                break;
        }
        functionMenuCancel();
    }

    return (
        <Modal width={'600px'} title="功能菜单" closable={true} open={isModalOpen} onCancel={handleCancel} footer={null}>
            {contextHolder}
            <div className={styles.modal_content}>
                <Row gutter={6} >
                    {itemList.map((item, index) => {
                        return (
                            <Col key={index} span={24 / 4}>
                                <div className={styles.menu_item} onClick={() => { clickItem(index) }}>
                                    {item.imgViw}
                                    <span className={styles.item_text}>{item.title}</span>
                                </div>
                            </Col>
                        );
                    })}
                </Row>
            </div>
        </Modal>
    )
}


export default FunctionMenu

